<template>
    <view class="main" :style="themeColor">
        <view class="message-box">
            <image v-if="info.SkuModel.SkuImg" class="product-img" :src="easyGetImgUrl(info.SkuModel.SkuImg)"></image>
            <image v-else class="product-img" :src="easyGetImgUrl(data.ThumbnailUrl310)" mode="aspectFill"></image>
            <view class="vertical-box">
                <view class="trade-name">{{ data.ProductName }}</view>
                <view class="price-box">
                    <view class="num-price">￥{{ getShowPrice(info.SkuModel.ProductUnitPrice.Price) }}</view>
                </view>
                <view>
                    <text v-if="info.SkuModel.AttributeSkuDisplay">{{ info.SkuModel.AttributeSkuDisplay }}</text>
                    <text v-else>默认规格</text>
                </view>
            </view>
        </view>
        <view class="input-box">
            <view class="title">登记数量</view>
            <input maxlength="8" v-model="lackNum" placeholder="请输入数量" />
        </view>
        <view class="input-box">
            <view class="title">联系人姓名</view>
            <input v-model="contactName" placeholder="请输入姓名" />
        </view>
        <view class="input-box">
            <view class="title">联系人电话</view>
            <input v-model="contactTel" placeholder="请输入电话" />
        </view>
        <view class="input-box">
            <textarea v-model="remark" class="more-line" placeholder="请输入备注"></textarea>
        </view>
        <view class="btn btn-success" v-if="userInfo.WorkerTel" @click="ywycall"
            >联系业务员:{{ userInfo.WorkerName }}</view
        >
        <view class="footer">
            <view class="footer-box">
                <view class="title">合计数量：{{ lackNum ? lackNum : 0 }}</view>
                <view class="determine" @click="SaveLackStock">确定</view>
            </view>
        </view>
    </view>
</template>

<script>
import specTree from "@/pages_shop/components/product/spec-tree.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import appMixin from "@/utils/appMixin.js"
import { SaveLackStock } from "@/service/api/product.js"
export default {
    components: {
        specTree,
    },
    data() {
        return {
            info: {},
            data: {},
            lackNum: "",
            contactTel: "",
            contactName: "",
            remark: "",
            userInfo: {},
        }
    },
    onLoad(e) {
        this.contactTel = storage.getCache("userInfo").Tel
        this.contactName = storage.getCache("userInfo").RealName
        if (JSON.stringify(e) != "{}") {
            let list = JSON.parse(decodeURIComponent(e.info))
            let data = JSON.parse(decodeURIComponent(e.data))
            Object.assign(this.info, list)
            Object.assign(this.data, data)
        }
    },
    mounted() {
        this.userInfo = storage.getCache("userInfo")
    },
    methods: {
        SaveLackStock() {
            if (!this.lackNum) {
                this.easyToast("请输入数量")
                return
            } else if (!this.contactName) {
                this.easyToast("请输入联系人姓名")
                return
            } else if (!this.contactTel) {
                this.easyToast("请输入联系人电话")
                return
            }
            let param = {
                productId: this.info.ProductId,
                contactTel: this.contactTel,
                contactName: this.contactName,
                remark: this.remark,
                lackSkuList: [
                    {
                        skuId: this.info.SkuModel.SkuId,
                        lackNum: this.lackNum,
                    },
                ],
            }
            SaveLackStock(param).then((res) => {
                if (res.State == 1) {
                    this.easyToast("提交成功")
                    setTimeout(() => {
                        this.easyGoBack()
                    }, 1000)
                } else if (res.State == 2) {
                    this.easyToast("未登录")
                } else {
                    this.easyToast("提交失败")
                }
            })
        },
        getShowPrice(price) {
            let productDisplay = storage.getCache("productDisplay")
            if (productDisplay) {
                return price.toFixed(productDisplay.PriceDecimalPlaces ? productDisplay.PriceDecimalPlaces : 2)
            }
            return price
        },
        ywycall() {
            uni.makePhoneCall({
                phoneNumber: this.userInfo.WorkerTel,
            })
        },
    },
}
</script>

<style lang="scss">
.btn {
    height: 80rpx;
    font-size: 28rpx;
    margin: 24rpx;
}
.footer {
    width: 750rpx;
    height: 88rpx;
    background: #ffffff;
    box-shadow: 0px -2rpx 6rpx 0px rgba(0, 0, 0, 0.1);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;

    .footer-box {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        font-size: 28rpx;

        view {
            flex: 1;
        }

        .title {
            margin-left: 20rpx;
        }

        .determine {
            display: flex;
            background-color: $app-color-main;
            color: $color-white;
            font-size: 32rpx;
            height: 100%;
            border-radius: 6rpx;
            justify-content: center;
            align-items: center;
        }
    }
}

.main {
    display: flex;
    flex-direction: column;
    background-color: $color-white;
    margin-top: 20rpx;
}

.vertical-box {
    display: flex;
    flex-direction: column;
}

.message-box {
    display: flex;
    margin: 30rpx;
}

.product-img {
    width: 200rpx;
    height: 200rpx;
    margin-right: 20rpx;
    border-radius: 8rpx;
}

.price-box {
    display: flex;
    flex: 1;
    align-items: center;
}

.price-text {
    font-size: $font-size-36;
    color: $color-orange-1;
    font-weight: 600;
}

.input-box {
    border-bottom: 1px solid #d6d6d6;
    display: flex;
    align-items: center;
    padding: 20rpx;
    justify-content: space-between;

    input {
        font-size: 28rpx;
        text-align: right;
    }

    .title {
        font-size: 28rpx;
    }

    .more-line {
        width: 100%;
    }
}

.input-box:last-child {
    border: 0;
}
</style>
